<style rel="stylesheet/scss" lang="scss" >
.pro-gzq-home-log-listview {
  .searchbar {
    padding: 10px 20px;
    color: #6a7794;
    background: #f5f7fe;
    font-size: 14px;
    .input-box {
      display: inline-block;
      margin-left: 10px;
      .el-range-editor,
      .el-input {
        width: 285px;
        margin-right: 10px;
        input {
          cursor: auto;
        }
      }
      .jeicon-user-cfg {
        font-size: 14px;
        line-height: 28px;
      }
      .spliter {
        font-size: 12px;
        color: #dcdfe6;
      }
      .search {
        color: #386bd0;
        cursor: pointer;
      }
    }
    .el-dropdown {
      color: #ffffff;
      background: #386bd0;
      border-radius: 15px;
      cursor: pointer;
      padding: 0 10px;
      line-height: 24px;
    }
    .journal_list_checkbox {
      display: inline-block;
      .el-checkbox {
        margin-right: 10px;
      }
      .el-checkbox__label,
      .el-checkbox__input.is-checked + .el-checkbox__label {
        color: #888a8c;
      }
    }
  }

  .je-vue-listview {
    padding: 0;
    .listview-body {
      padding: 10px 20px;
    }
    .je-vue-pagebar {
      background: #f4f7fd;
      height: 50px;
      line-height: 50px;
      padding: 0 20px;
    }
    .list-item {
      padding: 10px 20px;
      position: relative;
      color: #333333;
      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 1px;
        width: 100%;
        background: #f3f3f3;
      }
      &:last-child:after {
        display: none;
      }
      .item-content {
        line-height: 24px;
        cursor: pointer;
        &:hover {
          color: #386bd0;
        }
      }
      .item-date {
        color: #386bd0;
        line-height: 24px;
        position: relative;
        span {
          margin-right: 20px;
        }
        .keyword {
          margin: 0;
        }
        .user {
          font-weight: bold;
          font-size: 18px;
        }
        .taps_wrp {
          position: absolute;
          top: 0;
          right: -5px;
          margin: 0;
        }
      }
      .other-list {
        margin-top: 10px;
        .item-file {
          float: left;
          position: relative;
          .title {
            // line-height: 57px;
            float: left;
            color: #A9ABA9;
          }
          .items {
            float: left;
            width: 50px;
            &:not(:first-child) {
              margin-left: 15px;
            }
          }
          &:after {
            content: "";
            display: table;
            clear: both;
          }
        }
        .dpr-list {
          float: right;
          text-align: right;
          width: 50%;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          overflow: hidden;
          /* autoprefixer:off */
          -webkit-box-orient: vertical;
          /* autoprefixer:on */
        }
        &:after {
          content: "";
          display: table;
          clear: both;
        }
      }

      .item-remove {
        cursor: pointer;
        font-size: 12px;
        color: #386bd0;
        visibility: hidden;
      }
      &:hover .item-remove {
        visibility: visible;
      }
    }
  }
  .journal-list {
    position: relative;
    .changeMultiple {
      position: absolute;
      bottom: 10px;
      left: 115px;
      transform: translate(-50%, 0);
    }
    .quick-list {
      float: left;
      width: 232px;
      border-right: 1px solid #dcdfe6;
      overflow-y: auto;
      position: relative;
      .calendar_wrp {
        width: 100%;
        height: 220px;
        border: 1px solid #f3f3f3;
      }
      .tree_wrp {
        position: absolute;
        top: 220px;
        right: 0;
        bottom: 0;
        left: 0;
        overflow-y: auto;
      }
    }
    .lists {
      float: left;
      // width: 936px;
      position: relative;
      .float-btn {
        position: absolute;
        right: 2%;
        bottom: 15%;
        width: 50px;
        height: 50px;
        border-radius: 100%;
        background: #536dfe;
        cursor: pointer;
        > i {
          color: #ffffff;
          font-size: 18px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
    &:after {
      content: "";
      display: table;
      clear: both;
    }
  }

  &.other-log {
    .list-item {
      color: #808080;
      // &::before {
      //   content: "";
      //   width: 6px;
      //   height: 6px;
      //   border-radius: 100%;
      //   background: #e4e4e4;
      //   position: absolute;
      //   left: 5px;
      //   top: 18px;
      // }
      // &.unread {
      //   color: #333333;
      // }
      // &.unread::before {
      //   background: #d24d57;
      // }
      .comment-flag {
        margin-right: 0;
        margin-left: 20px;
        display: inline-block;
        width: 42px;
        height: 14px;
        position: relative;
        font-size: 12px;
        color: #bebebe;
        > i {
          font-size: 55px;
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
        }
        > span {
          color: #ffffff;
          line-height: 14px;
          text-align: center;
          position: absolute;
          top: 3px;
          right: 0;
          bottom: 0;
          left: 8px;
          width: 42px;
        }
        &.ydp {
          color: #288c4e;
        }
        &.yyd {
          color: #f19b2c;
        }
        &.ddp {
          color: #ef4d4d;
        }
      }
    }
  }
}
</style>
<template>
  <div class="pro-gzq-home-log-listview">
    <div class="searchbar">
      <!-- 日志类型 -->
      <el-dropdown
        @command="changeType"
        trigger="click"
        placement="bottom"
      >
        <span class="el-dropdown-link">
          {{ getEn(activeType.text) }}<i class="el-icon-caret-bottom el-icon--right" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="(item) in types"
            :key="item"
            :command="item.code"
          >
            {{ getEn(item.text) }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <div class="input-box">
        {{ $t('_log.date') }}:
        <el-date-picker
          ref="date"
          v-model="date"
          :editable="false"
          :start-placeholder="$t('_log.kaishi')"
          :end-placeholder="$t('_log.jieshu')"
          @change="load"
          type="daterange"
          range-separator="——"
          size="mini"
        />
        {{ $t('_log.keyword') }}:
        <el-input
          ref="user"
          :placeholder="$t('_log.keywordholder')"
          @keyup.enter.native="load"
          @input="inputChange($event)"
          @clear="load"
          v-model="_keyword"
          size="mini"
          clearable
        />
        <div
          v-show="type === 'other'"
          class="journal_list_checkbox"
        >
          <el-checkbox
            @change="load"
            v-model="yd"
          >
            {{ $t('_log.read') }}
          </el-checkbox>
          <el-checkbox
            @change="load"
            v-model="wd"
          >
            {{ $t('_log.unread') }}
          </el-checkbox>
          <el-checkbox
            @change="load"
            v-model="ddp"
          >
            {{ $t('_log.review') }}
          </el-checkbox>
          <el-checkbox
            @change="load"
            v-model="ydp"
          >
            {{ $t('_log.comments') }}
          </el-checkbox>
        </div>
        <span
          @click="load"
          class="search"
        >{{ $t('_log.search') }}</span>
      </div>
    </div>
    <div class="journal-list">
      <el-button
        v-if="type==='other'"
        @click="changeTreeType"
        size="mini"
        class="changeMultiple"
      >
        {{ getEn(isMultilpe? '单选' : '多选') }}
      </el-button>
      <div
        v-show="type === 'other'"
        :style="quickHeight"
        class="quick-list"
      >
        <div class="calendar_wrp">
          <dateRange
            :selectDate="quickTime"
            @othertime="getOtherTime"
          />
        </div>
        <div class="tree_wrp">
          <!-- <selectTree :multipleTree="isMultilpe" :ids="treeUserIds" @list="getUserList" /> -->
          <selectTree
            v-show="isMultilpe"
            :multipleTree="true"
            :ids="treeUserIds"
            :singleChange="singleChange"
            @list="getUserList"
            @multipleFunc="multipleFunc"
          />
          <selectTree
            v-show="!isMultilpe"
            :multipleTree="false"
            :ids="treeUserIds"
            :multipleChange="multipleChange"
            @list="getUserList"
            @singleFunc="singleFunc"
          />
        </div>
      </div>
      <div
        :style="{ width: type === 'owner' ? '100%' : '976px' }"
        class="lists"
      >
        <je-listview
          ref="list"
          v-loading="loading"
          :total-count="totalCount"
          :page-size="30"
          :empty-height="180"
          :item-height="70"
          :scrollTop="true"
          @buildData="_buildData"
        >
          <!-- 数据项 -->
          <div
            slot="listitem"
            v-for="(item,index) in data"
            :key="index"
            class="list-item"
          >
            <!-- :class="{'unread':item.SY_FUNCEDIT != '0'}" -->
            <div
              @click="showInfo(item,index)"
              class="item-content"
            >
              {{ $t('_log.gongzuozongjie') }}: <span v-html="formatKeyword(item.REPORT_GZZJ)" />
            </div>
            <div class="item-date">
              <span
                v-if="type =='other'"
                v-html="formatKeyword(item.SY_CREATEUSERNAME)"
                class="user"
              />
              <span>
                {{ getEn(item.REPORT_BGLX_CODE == 'RZ' ? '日志' : item.REPORT_BGLX_CODE == 'ZB' ? '周报' : '月报') }}
                {{ $t('_log.date') }}：{{ getTime(item) }}</span>
              <span>{{ $t('_log.faburiqi') }}：{{ item.SY_CREATETIME }}</span>
              <span
                v-if="type === 'other'"
                class="taps_wrp"
              >
                <span
                  v-if="item.isRead != '1'"
                  class="comment-flag"
                >
                  <i class="jeicon jeicon-the-label" />
                  <span>{{ $t('_log.unread1') }}</span>
                </span>
                <span
                  v-if="item.isRead == '1'"
                  class="comment-flag yyd"
                >
                  <i class="jeicon jeicon-the-label" />
                  <span>{{ $t('_log.read1') }}</span>
                </span>
                <span
                  v-if="item.commentAuth == '1' && item.isComment != '1'"
                  class="comment-flag ddp"
                >
                  <i class="jeicon jeicon-the-label" />
                  <span>{{ $t('_log.review') }}</span>
                </span>
                <span
                  v-if="item.commentAuth == '1' && item.isComment == '1'"
                  class="comment-flag ydp"
                >
                  <i class="jeicon jeicon-the-label" />
                  <span>{{ $t('_log.comments') }}</span>
                </span>
              </span>
              <i
                v-if="type=='owner'"
                @click="doRemove(item,index)"
                class="jeicon jeicon-error item-remove"
              />
            </div>
            <div class="other-list">
              <div class="item-file">
                <div class="title">
                  <i
                    :style="{color: item.fjlist.length > 0 ? '#FF6F45' : '#A9ABA9'}"
                    class="jeicon jeicon-attachment-o"
                  />
                  <span v-if="lang == 'zh_CN'">已上传{{ item.fjlist.length }}个附件</span>
                  <span v-else>{{ item.fjlist.length }} attachments have been uploaded</span>
                </div>
                <!-- <div v-for="(item, index) in item.fjlist"
                     :key="index"
                     class="items">
                  <downloadItem :data="item" />
                </div> -->
              </div>
              <div
                v-if="type === 'other'"
                class="dpr-list"
              >
                {{ $t('_log.reuser') }}：{{ utilName(item.REPORT_DPR_NAME) }}
              </div>
            </div>
          </div>
        </je-listview>
        <div
          v-show="type === 'other'"
          @click="readAll"
          class="float-btn"
        >
          <i class="jeicon jeicon-seal" />
        </div>
      </div>
    </div>
    <!-- <je-listview ref="list" v-loading="loading"
            :total-count="totalCount"
            :page-size="30"
            :empty-height="180"
            :item-height="70"
            @buildData="_buildData"
            >
            <div slot="listitem" class="list-item" v-for="(item,index) in data" :key="index"
                :class="{'unread':item.SY_FUNCEDIT != '0'}"
            >
                <div class="item-content" @click="showInfo(item,index)">
                    工作总结: <span v-html="formatKeyword(item.REPORT_GZZJ)"></span>
                </div>
                <div class="item-date">
                    <span v-if="type =='other'" class="user" v-html="formatKeyword(item.SY_CREATEUSERNAME)"></span>
                    <span>日志日期：{{getTime(item)}}</span>
                    <span>发布日期：{{item.SY_CREATETIME}}</span>
                    <span class="comment-flag" v-if="type=='other'" v-html="commentFlag(item)"></span>
                    <i class="jeicon jeicon-error item-remove" v-if="type=='owner'" @click="doRemove(item,index)"></i>
                </div>
                <div class="item-file">
                    <div class="title">相关附件:</div>
                    <div
                        v-for="(item, index) in filelist"
                        :key="index"
                        class="items"
                    >
                        <downloadItem :data="item" />
                    </div>
                </div>
            </div>
        </je-listview> -->
  </div>
</template>

<script>
import ListView from '../../../../components/listview/listview.vue';
import Util from '../../util/util.js';
import selectTree from '../../components/selectTree';
import dateRange from '../../components/dateRange';
import spe from '../../assets/lang/log/speNationalList';

export default {
  name: 'Listview',
  components: {
    'je-listview': ListView, selectTree, dateRange,
  },
  props: {
    visible: {
      type: Boolean,
      default: true,
    },
    type: {
      type: String,
      default: 'owner',
    },
  },
  data() {
    return {
      type: this.type, // 日志类型：owner自己，other他人
      visible: this.visible,
      loading: true,
      types: [
        { code: 'ALL', text: '全部' },
        { code: 'RZ', text: '日志' },
        { code: 'ZB', text: '周报' },
        { code: 'YB', text: '月报' },
      ],
      activeType: {},
      date: '',
      keyword: '',
      _keyword: '',
      totalCount: 0,
      data: [],
      yd: false,
      wd: false,
      ddp: false,
      ydp: false,
      isMultilpe: true,
      treeUserIds: [],
      quickTime: {},
      multipleChange: {},
      singleChange: {},
      lang: JE.getCookies('je-local-lang') || 'zh_CN',
    };
  },
  computed: {
    quickHeight() {
      if (!document.querySelectorAll('.listview-body')[0]) return;
      const h = window.getComputedStyle(document.querySelectorAll('.listview-body')[0]).height;
      const height = `${h.substring(0, h.length - 2) - 0 + 10}px`;
      return { height };
    },
    filelist() {
      return function (str) {
        if (!str) return;
        return JSON.parse(str);
      };
    },
  },
  watch: {
    visible() {
      const me = this;
      if (me.visible) {
        me.load();
      }
    },
  },
  mounted() {
    const me = this;
    me.activeType = me.types[0];
    me.load();
  },
  methods: {
    inputChange(e) {
      this.$forceUpdate();
    },
    multipleFunc(data) {
      this.multipleChange = data;
    },
    singleFunc(data) {
      this.singleChange = data;
    },
    /**
         * 评论过的标记
         */
    commentFlag(item, type) {
      // 允许点评
      const comment = item.SY_CREATEUSERID != JE.USER.userId && JE.split(item.REPORT_DPR_ID, ',').indexOf(JE.USER.userId) != -1;
      // 是否点评过
      const commented = JE.split(item.REPORT_YDPR_ID, ',').indexOf(JE.USER.userId) != -1;
      if (commented) {
        return '<span style="color:green;">已点评</span>';
      } if (comment) {
        return '<span style="color:red;">待点评</span>';
      }
    },
    /**
         * 当前用户是否点评人
         */
    isDPUser() {

    },
    showInfo(item, index) {
      item.isRead = '1';
      this.$emit('showInfo', item, index);
    },
    formatKeyword(text) {
      let keyword = Util.formatKeyword(text, this.keyword);
      keyword = keyword.replace(/\n/g, '<br>');
      return keyword;
    },
    setVisible(visible) {
      this.$emit('setVisible', visible);
    },
    /**
         * 格式化时间
         */
    getTime(item) {
      const start = item.REPORT_KSSJ; const
        end = item.REPORT_JSSJ;
      switch (item.REPORT_BGLX_CODE) {
        case 'RZ':
          return start;
        case 'ZB':
          return `${start} 到 ${end}`;
        case 'YB':
          return start.substring(0, 7);
      }
    },
    getList() {
      return this.$refs.list;
    },
    /**
         * 切换类型
         */
    changeType(code) {
      const me = this;
      Ext.each(this.types, (type) => {
        if (type.code == code) {
          me.activeType = type;
          return false;
        }
      });
      me.load();
    },
    load() {
      const me = this;
      this.keyword = this._keyword || '';
      me.getList().loadPage(1);
    },
    /**
         * 查询参数
         */
    getParams() {
      const me = this;
      const pageInfo = me.getList().getPageInfo();
      const params = {
        queryText: this.keyword.trim() || '',
        REPORT_BGLX_CODE: this.activeType.code,
        REPORT_KSSJ: '',
        REPORT_JSSJ: '',
        // isComment: '',
        auth: '',
        type: this.type,
        start: pageInfo.start,
        limit: pageInfo.limit,
        concernid: this.treeUserIds.join(','),
      };
      // 日期
      if (JE.isNotEmpty(this.date)) {
        this.quickTime = {};
        params.REPORT_KSSJ = Ext.Date.format(this.date[0], 'Y-m-d');
        params.REPORT_JSSJ = Ext.Date.format(this.date[1], 'Y-m-d');
      }
      if (this.quickTime instanceof Date) {
        this.date = '';
        params.REPORT_KSSJ = Ext.Date.format(this.quickTime, 'Y-m-d');
        params.REPORT_JSSJ = Ext.Date.format(this.quickTime, 'Y-m-d');
      }
      // 是否已读
      if ((this.yd && this.wd) || (!this.yd && !this.wd)) {
        params.isRead = '';
      } else {
        params.isRead = this.yd ? '1' : this.wd ? '0' : '';
      }
      // 是否点评
      if (!this.ddp && !this.ydp) {
        params.isComment = '';
      } else if (this.ddp && this.ydp) {
        params.isComment = 'ALL';
      } else {
        params.isComment = this.ydp ? '1' : this.ddp ? '0' : '';
      }
      // var params = {
      //   tableCode: 'JE_CIRCLE_REPORT',
      //   funcCode: 'JE_CIRCLE_REPORT',
      //   start: pageInfo.start,
      //   limit: pageInfo.limit,
      //   funcEdit: true,
      //   whereSql: '',
      //   orderSql: 'order by SY_CREATETIME desc'
      // };
      // if (me.type == 'owner') {
      //   params.whereSql += "AND SY_CREATEUSERID='" + JE.USER.userId + "'";
      // } else {
      //   var ids = [].concat(JE.USER.branchInfo.jgUserIds).concat(JE.USER.branchInfo.zgUserIds).concat(JE.USER.branchInfo.zsUserIds);
      //   //params.whereSql += "AND SY_CREATEUSERID!='"+JE.USER.userId+"' AND (REPORT_DPR_ID like '%"+JE.USER.userId+"%' or SY_CREATEUSERID IN('"+ids.join("','")+"'))";
      //   params.whereSql += "AND (REPORT_DPR_ID like '%" + JE.USER.userId + "%' or (SY_CREATEUSERID!='" + JE.USER.userId + "' AND SY_CREATEUSERID IN('" + ids.join("','") + "')))";

      // }
      // if (me.activeType.code != 'ALL') {
      //   params.whereSql += " AND REPORT_BGLX_CODE = '" + me.activeType.code + "'"
      // }
      // //关键字
      // if (JE.isNotEmpty(me.keyword.trim())) {
      //   //or REPORT_DPR_NAME like '%"+me.keyword+"%'
      //   params.whereSql += " AND (SY_CREATEUSERNAME like '%" + me.keyword + "%' or REPORT_GZZJ like '%" + me.keyword + "%' or REPORT_GZJH like '%" + me.keyword + "%' or REPORT_GZXD like '%" + me.keyword + "%' or REPORT_DPXX like '%" + me.keyword + "%')"
      // }
      // //日期
      // if (JE.isNotEmpty(me.date)) {
      //   this.quickTime = {};
      //   var start = Ext.Date.format(me.date[0], 'Y-m-d'),
      //     end = Ext.Date.format(me.date[1], 'Y-m-d');
      //   params.whereSql += " AND REPORT_KSSJ>='" + start + "' AND REPORT_KSSJ<='" + end + "'";
      // }
      // if (this.quickTime instanceof Date) {
      //   this.date = '';
      //   const d = Ext.Date.format(me.quickTime, 'Y-m-d');
      //   console.log(d);
      // }
      return params;
    },
    /**
         * 加载数据底层
         */
    _buildData() {
      const me = this;
      me.loading = true;
      JE.ajax({
        url: '/je/workLog/loadTaskList',
        params: me.getParams(),
        async: true,
        success(response) {
          const data = JE.getAjaxData(response);
          // 换页/刷新时滚动到顶部,data=0防止换页时页面抖动和闪屏
          me.data = [];
          const ind = this.type === 'owner' ? 0 : 1;

          me.data = data.rows;
          me.data.forEach((item) => {
            if (item.REPORT_FJ && item.REPORT_FJ.length > 0) {
              item.fjlist = JSON.parse(item.REPORT_FJ);
            } else {
              item.fjlist = [];
            }
          });
          me.totalCount = data.totalCount;
          me.loading = false;
          me.$nextTick(() => {
            document.getElementsByClassName('listview-body')[ind].scrollTop = 0;
          });
        },
      });
    },
    doRemove(item, index) {
      const me = this;
      JE.confirm(`${me.$t('suredelete')}?`, (btn) => {
        if (btn == 'ok') {
          const obj = JE.ajax({
            url: JE.getUrlMaps('je.core.remove'),
            params: {
              tableCode: 'JE_CIRCLE_REPORT',
              ids: item.JE_CIRCLE_REPORT_ID,
            },
          });
          if (obj.success) {
            me.load();
          }
        }
      });
    },
    /**
         * 设置全部已读
         */
    readAll() {
      const that = this;
      JE.confirm(that.$t('_log.setallread'), (btn) => {
        if (btn == 'ok') {
          const obj = JE.ajax({
            url: '/je/workLog/readTaskAll',
          });
          if (obj.success) {
            that.$nextTick(() => {
              that.data.forEach((item) => {
                if (item.commentAuth == '1') {
                  item.isRead = '1';
                  item.isComment = '1';
                }
              });
            });
          }
        }
      });
    },
    getUserList(list) {
      this.treeUserIds = list;
      this.load();
    },
    changeTreeType() {
      this.$nextTick(() => {
        this.treeUserIds = [];
        this.isMultilpe = !this.isMultilpe;
      });
    },
    getOtherTime(data) {
      this.date = '';
      this.quickTime = data;
      this.load();
    },
    changeRead(index) {
      this.$nextTick(() => {
        this.data[index].isComment = '1';
      });
    },
    utilName(name) {
      return name.replace(/,/g, ', ');
    },
    getEn(cn) {
      if (!cn) return;
      if (this.$i18n.locale == 'zh_CN') return cn;
      return spe[cn] || cn;
    },
  },
};
</script>
